<script setup>
import { ref, onMounted } from 'vue'
import { useIntervalFn } from '@vueuse/core'
import { Icon } from '@iconify/vue'
import { getLatestIPs } from './services/api'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'

const ipData = ref({
  ipv4: [],
  ipv6: [],
  timestamp: ''
})

const loading = ref(false)
const error = ref(null)
const showToast = ref(false)
const toastMessage = ref({ type: '', text: '' })

const fetchData = async () => {
  try {
    loading.value = true
    error.value = null
    ipData.value = await getLatestIPs()
  } catch (e) {
    error.value = '获取IP数据失败'
    console.error(e)
  } finally {
    loading.value = false
  }
}

const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text)
    toastMessage.value = {
      type: 'success',
      text: '已复制到剪贴板'
    }
    showToast.value = true
    setTimeout(() => {
      showToast.value = false
    }, 2000)
  } catch (err) {
    toastMessage.value = {
      type: 'error',
      text: '复制失败'
    }
    showToast.value = true
    setTimeout(() => {
      showToast.value = false
    }, 2000)
  }
}

// 每5分钟刷新一次
useIntervalFn(fetchData, 5 * 60 * 1000)

onMounted(fetchData)

// 修改 fullpage 配置
const options = {
  licenseKey: 'GPL-LICENSE-KEY',
  anchors: ['home', 'about', 'contact'],
  navigationPosition: 'right',
  navigation: true,
  scrollingSpeed: 1000,
  easingcss3: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
  onLeave: (origin, destination) => {
    currentSection.value = destination.index
  },
  afterLoad: () => {
    // 页面加载完成后的回调
  },
  css3: true,
  scrollBar: false,
  verticalCentered: false,
  fitToSection: true,
  fitToSectionDelay: 300,
  scrollOverflow: true,
  touchSensitivity: 15,
  normalScrollElements: '.scrollable'
}

const currentSection = ref(0)
</script>

<template>
  <div class="text-white">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 w-full bg-black/30 backdrop-blur-md z-50 border-b border-white/10">
      <div class="container mx-auto h-16 flex items-center justify-between px-5">
        <div class="flex items-center space-x-4">
          <Icon icon="mdi:ip-network" class="text-2xl text-white" />
          <span class="text-xl font-bold animate-glow">不为人知的小小世界</span>
        </div>
        <div class="flex items-center space-x-8">
          <a href="#home" 
             class="flex items-center space-x-2 hover:text-white/80 transition-colors"
             :class="{ 'text-white': currentSection === 0, 'text-white/60': currentSection !== 0 }">
            <Icon icon="mdi:home" class="text-xl" />
            <span>首页</span>
          </a>
          <a href="#about"
             class="flex items-center space-x-2 hover:text-white/80 transition-colors"
             :class="{ 'text-white': currentSection === 1, 'text-white/60': currentSection !== 1 }">
            <Icon icon="mdi:information" class="text-xl" />
            <span>关于</span>
          </a>
          <a href="#contact"
             class="flex items-center space-x-2 hover:text-white/80 transition-colors"
             :class="{ 'text-white': currentSection === 2, 'text-white/60': currentSection !== 2 }">
            <Icon icon="mdi:message" class="text-xl" />
            <span>联系</span>
          </a>
        </div>
        <div class="flex items-center space-x-6">
          <button class="p-2 hover:bg-white/10 rounded-full transition-all duration-300" 
                  @click="fetchData" 
                  title="刷新数据">
            <Icon icon="mdi:refresh" class="text-xl text-white" :class="{ 'animate-spin': loading }" />
          </button>
        </div>
      </div>
    </nav>

    <!-- 全屏滚动内容 -->
    <full-page ref="fullpage" :options="options" id="fullpage">
      <!-- 每个section都添加背景图片 -->
      <div class="section relative">
        <div class="absolute inset-0 z-0">
          <img src="https://objectstorageapi.bja.sealos.run/g6rnmc1y-yunshang/wan_ip/123.jpg"
               alt="background"
               class="w-full h-full object-cover object-center opacity-75" />
          <div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/70 to-black/70"></div>
          <div class="absolute inset-0 backdrop-blur-[5px]"></div>
        </div>
        <Home :ip-data="ipData" :loading="loading" :error="error" @copy="copyToClipboard" />
      </div>
      
      <div class="section relative">
        <div class="absolute inset-0 z-0">
          <img src="https://objectstorageapi.bja.sealos.run/g6rnmc1y-mymy/hero-bg.jpg"
               alt="background"
               class="w-full h-full object-cover object-center opacity-75" />
          <div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/70 to-black/70"></div>
          <div class="absolute inset-0 backdrop-blur-[5px]"></div>
        </div>
        <About />
      </div>
      
      <div class="section relative">
        <div class="absolute inset-0 z-0">
          <img src="https://objectstorageapi.bja.sealos.run/g6rnmc1y-yunshang/wan_ip/contact-bg.jpg"
               alt="background"
               class="w-full h-full object-cover object-center opacity-75" />
          <div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/70 to-black/70"></div>
          <div class="absolute inset-0 backdrop-blur-[5px]"></div>
        </div>
        <Contact />
      </div>
    </full-page>

    <!-- Toast -->
    <Transition>
      <div v-if="showToast" class="fixed top-20 right-4 z-[60]">
        <div class="bg-black/50 backdrop-blur-md text-white shadow-lg rounded-lg border border-white/10 p-4 flex items-center gap-3">
          <Icon :icon="toastMessage.type === 'success' ? 'mdi:check-circle' : 'mdi:alert-circle'" 
                :class="['text-xl', toastMessage.type === 'success' ? 'text-green-400' : 'text-red-400']" />
          <span>{{ toastMessage.text }}</span>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style>
/* 确保每个section占满宽度 */
.section {
  @apply w-full relative;
}

/* 删除之前添加的布局相关样式 */
.fp-section {
  height: 100%;
}

/* 保留滚动条和导航点样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 导航点样式 */
#fp-nav ul li a span {
  @apply bg-white/30 !w-3 !h-3;
}

#fp-nav ul li a.active span {
  @apply bg-white/80 scale-125;
}

.fp-watermark{
  display: none !important;
}

/* 添加新的背景图片过渡效果 */
.section {
  transition: transform 1000ms ease;
}

.section img {
  transition: opacity 500ms ease-in-out;
  will-change: opacity;
}
</style>